<template>
	<MkDialog v-model="r.showDialog" :title="r.printMsg" width="300px">
		<h1 :class="{ shake: r.errorMsg }">{{ r.errorMsg }}</h1>
		<br>
		<button id="myButton" v-print="printObj">打印</button>
		<el-collapse>
			<el-collapse-item :title="props.code" name="1">
				<div id="printMe">
					<component :is="printComp"> </component>
				</div>
			</el-collapse-item>
		</el-collapse>
	</MkDialog>
</template>

<script lang="ts" setup>
// 网页打印, 通过浏览器渲染html打印, 用于临床
// 使用时, 首先设置code, 再调用print方法传入三个约定的参数, 参数名固定为p1,p2,p3
// 使用举例: 
// <MkPrintWeb code="TraApply" ref="printRef"></MkPrintWeb>
// const printRef = ref()
// printRef.value.printWeb(p1,p2,p3)
// 打印使用了vue3-print-nb插件
import { ref } from 'vue';
// 接口
import { BasPrintApi } from '/@/api/bas/basPrint';
import { clog, isNull } from '/@/utils';

defineOptions({
	name: 'MkPrintWeb'
})

const props = defineProps({
	code: {
		type: String,
		default: '单据类型'
	},
})

const r = reactive({
	// 打印参数
	showDialog: false,
	printMsg: "正在打印...",
	errorMsg: "",
})
const printObj = {
	id: "printMe", //打印的html标签id
	popTitle: '',
	extraCss: "mkprintweb.css",
	extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
	beforeOpenCallback() {
		r.printMsg = "准备打印";
		console.log('打开之前')
	},
	openCallback() {
		r.printMsg = "正在打印...";
		console.log('执行了打印')
	},
	closeCallback() {
		r.printMsg = "打印完成";
		console.log('关闭了打印工具')
		r.showDialog = false;
	}
}

//自定义组件
const printComp = ref()
const printWeb = async (p1: string, p2: string, p3: string) => {
	r.printMsg = "正在打印...";
	r.errorMsg = "";
	r.showDialog = true;

	var res = await BasPrintApi().queryDataAndTemplate({ code: props.code, p1, p2, p3 })
	printComp.value = {
		setup() {
			return {
				t1: res.data.t1,
				t2: res.data.t2,
				t3: res.data.t3,
				t4: res.data.t4,
				t5: res.data.t5
			};
		},
		template: `${res.template}`
	}

	nextTick(() => {
		var button = document.getElementById('myButton');
		button?.click(); //触发打印
	})
}

defineExpose({ printWeb });

</script>
<style>
.shake {
	animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	transform: translate3d(0, 0, 0);
}

@keyframes shake {

	10%,
	90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%,
	80% {
		transform: translate3d(2px, 0, 0);
	}

	30%,
	50%,
	70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%,
	60% {
		transform: translate3d(4px, 0, 0);
	}
}
</style>